<template>
    <div>
        <h2 class="press">系统管理员</h2>
        <!-- element-ui重写-- -->
        <el-row>
            <el-button type="primary" round @click="dialogVisible = true">编辑</el-button>
        </el-row>


        <el-table :data="get" style="width: 100%">
            <el-table-column prop="username" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="password" label="密码" width="180">
            </el-table-column>
            <el-table-column prop="type" label="角色">
            </el-table-column>
            <el-table-column prop="sex" label="性别">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="150">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="dialogVisible = true">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog title="编辑" :visible.sync="dialogVisible" width="30%">
            <el-form ref="form" :model="sub" label-width="80px">
                <el-form-item label="用户名">
                    <el-input v-model="sub.username"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="sub.password" show-password></el-input>
                </el-form-item>
                <el-form-item label="性别">
                    <el-select v-model="sub.sex" placeholder="请选择性别">
                        <el-option label="男" value="男"></el-option>
                        <el-option label="女" value="女"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="角色">
                    <el-select placeholder="请选择角色" v-model="sub.type">
                        <el-option label="系统管理员" value="系统管理员"></el-option>
                        <el-option label="后台数据操作人员" value="后台数据操作人员"></el-option>
                        <el-option label="话务分析" value="话务分析"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="方法">
                    <el-select placeholder="请选择方法" v-model="act">
                        <el-option label="添加" value="添加"></el-option>
                        <el-option label="删除" value="删除"></el-option>
                        <el-option label="修改" value="修改"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click.native="doselect">确定</el-button>
                    <el-button @click="dialogVisible = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <el-row>
            <el-button type="primary" @click="exitdocument">退出</el-button>
        </el-row>
    </div>

</template>

<script>
import axios from 'axios';
export default {
    data() {
        return {
            sub: {
                username: '',
                password: '',
                sex: '',
                type: '',
            },
            get: [],
            act: '',
            id: '',
            dialogVisible: false
        }
    },
    methods: {

        getdata() {
            axios.get('http://127.0.0.1:7001/login').then(res => {
                this.get = res.data;
            })
        },

        doselect() {
            if (this.act == '添加') {
                axios.post('http://127.0.0.1:7001/login', {
                    login: this.sub
                }).then(() => {
                    console.log('发送成功');
                    location.reload();
                });
            } else if (this.act == '删除') {
                axios.get('http://127.0.0.1:7001/login').then(res => {
                    this.get = res.data;
                    this.get.forEach((item) => {
                        if (item.username == this.sub.username) {
                            this.id = item.id;
                            axios.delete(`http://127.0.0.1:7001/login/${this.id}`).then((res) => {
                                console.log(res);
                            });
                            console.log(this.id);
                            return;
                        };
                    });
                    location.reload();
                });
            } else if (this.act == '修改') {
                axios.get('http://127.0.0.1:7001/login').then(res => {
                    this.get = res.data;
                    this.get.forEach((item) => {
                        if (item.username == this.sub.username) {
                            this.id = item.id;
                            axios.put(`http://127.0.0.1:7001/login/${this.id}`, {
                                sublist: this.sub
                            }).then((res) => {
                                location.reload();
                            });
                            return;
                        };
                    });
                });
            }
        },

        //退出当前页面
        exitdocument() {
            this.$router.push('/Login');
        },

    },
    created() {
        //从后台拿数据
        this.getdata()
    },
}
</script>
<style>
.press {
    font-size: 20px;

    color: #fafafa;

    letter-spacing: 0;

    text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135
}
</style>